<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>CRUD Example</title>
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css"
		/>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>
		<script src="../dist/cl-crud2.min.js"></script>
		<style>
			html,
			body,
			#app {
				height: 100%;
				width: 100%;
			}

			* {
				padding: 0;
				margin: 0;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<cl-crud ref="crud" @load="onLoad">
				<el-row type="flex" align="middle">
					<cl-refresh-btn></cl-refresh-btn>
					<cl-add-btn></cl-add-btn>
					<cl-multi-delete-btn></cl-multi-delete-btn>
					<cl-query
						:list="[
							{
								label: '启用',
								value: 1
							},
							{
								label: '禁用',
								value: 0
							}
						]"
					></cl-query>
					<cl-filter label="状态">
						<el-select
							size="mini"
							v-model="selects.status"
							@change="val => {
								refresh({
									status: val, 
									page: 1
								})	
							}"
						>
							<el-option value="" label="全部"></el-option>
							<el-option value="0" label="禁用"></el-option>
							<el-option value="1" label="启用"></el-option>
						</el-select>
					</cl-filter>
					<el-button size="mini" @click="openForm">自定义测试表单</el-button>
					<cl-flex1></cl-flex1>
					<cl-search-key
						field="name"
						:field-list="[
                            {
                                label: '姓名',
                                value: 'name'
                            },
                            {
                                label: '身份证',
                                value: 'idCard'
                            }
                        ]"
					></cl-search-key>
					<cl-adv-btn></cl-adv-btn>
				</el-row>

				<el-row>
					<cl-table ref="table" v-bind="table.props" v-on="table.on"> </cl-table>
				</el-row>

				<el-row type="flex">
					<cl-flex1>打开控制台瞧瞧呗~</cl-flex1>
					<cl-pagination></cl-pagination>
				</el-row>

				<!-- 高级搜索 -->
				<cl-adv-search ref="adv-search" v-bind="advSearch.props" v-on="advSearch.on">
				</cl-adv-search>

				<!-- 编辑、新增 -->
				<cl-upsert ref="upsert" v-bind="upsert.props" v-on="upsert.on"> </cl-upsert>

				<!-- 自定义表单 -->
				<cl-form ref="form">
					<!-- 动态增减表单验证 -->
					<template #slot-validate="{scope}">
						<el-form-item
							v-for="(item, index) in scope.vads"
							:key="index"
							:prop="'vads.' + index + '.val'"
							:rules="{ required: true, message: '请输入' }"
						>
							<el-input v-model="item.val"></el-input>
						</el-form-item>

						<el-button @click="addVad(scope.vads)">添加行</el-button>
					</template>

					<!-- 内嵌crud -->
					<template #slot-crud="{scope}">
						<cl-crud @load="onUpsertCrudLoad">
							<cl-table
								:props="{
									'max-height': '300px'
								}"
								:columns="[
									{
										label: '姓名',
										prop: 'name'
									},
									{
										label: '存款',
										prop: 'price',
									},
									{
										label: '创建时间',
										prop: 'createTime'
									},
								]"
							></cl-table>
						</cl-crud>
					</template>
				</cl-form>

				<!-- 自定义对话框 -->
				<cl-dialog
					title="自定义对话框"
					:visible.sync="dialog.visible"
					v-bind="dialog.props"
				>
					11111111111
				</cl-dialog>
			</cl-crud>
		</div>

		<script>
			const userList = [
				{
					id: 1,
					name: "刘一",
					process: 42.2,
					createTime: "2019年09月02日",
					price: 75.99,
					salesRate: 52.2,
					status: 1,
					images: [
						"https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/1.jpg"
					]
				},
				{
					id: 2,
					name: "陈二",
					process: 35.2,
					createTime: "2019年09月05日",
					price: 242.1,
					salesRate: 72.1,
					status: 1,
					images: [
						"https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/2.jpg"
					]
				},
				{
					id: 3,
					name: "张三",
					process: 10.2,
					createTime: "2019年09月12日",
					price: 74.11,
					salesRate: 23.9,
					status: 0,
					images: [
						"https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/3.jpg"
					]
				},
				{
					id: 4,
					name: "李四",
					process: 75.5,
					createTime: "2019年09月13日",
					price: 276.64,
					salesRate: 47.2,
					status: 0,
					images: [
						"https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/4.jpg"
					]
				},
				{
					id: 5,
					name: "王五",
					process: 25.4,
					createTime: "2019年09月18日",
					price: 160.23,
					salesRate: 28.3,
					status: 1,
					images: [
						"https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/5.jpg"
					]
				}
			];

			const testService = {
				page: (p) => {
					console.log("GET[page]", p);
					return Promise.resolve({
						list: userList,
						pagination: {
							page: p.page,
							size: p.size,
							total: 5
						}
					});
				},
				info: (d) => {
					console.log("GET[info]", d);
					return new Promise((resolve) => {
						resolve({
							id: 1,
							name: "icssoa",
							price: 100,
							ids: "0,3,2"
						});
					});
				},
				add: (d) => {
					console.log("POST[add]", d);
					return Promise.resolve();
				},
				delete: (d) => {
					console.log("POST[delete]", d);
					return Promise.resolve();
				},
				update: (d) => {
					console.log("POST[update]", d);
					return Promise.resolve();
				}
			};

			Vue.use(CRUD, {
				crud: {
					event: {
						refresh: (data, { app }) => {
							app.refresh(data);
						}
					}
				}
			});

			new Vue({
				el: "#app",

				data() {
					return {
						selects: {
							status: ""
						},
						table: {
							on: {
								"row-click": (row) => {
									console.log("行点击", row);
								}
							},

							props: {
								columns: [
									{
										type: "selection"
									},
									{
										label: "姓名",
										prop: "name"
									},
									{
										label: "存款",
										prop: "price",
										sortable: true
									},
									{
										label: "创建时间",
										prop: "createTime"
									},
									{
										label: "状态",
										prop: "status",
										dict: [
											{
												label: "启用",
												value: 1,
												type: "primary"
											},
											{
												label: "禁用",
												value: 0,
												type: "danger"
											}
										]
									},
									{
										label: "操作",
										type: "op",
										layout: [
											"edit",
											"delete",
											({ h }) => {
												return h(
													"el-button",
													{
														props: {
															type: "text",
															size: "mini"
														},
														on: {
															click: () => {
																this.$refs["crud"].rowAppend({
																	name: "icssoa append"
																});
															}
														}
													},
													"追加"
												);
											}
										]
									}
								]
							}
						},
						upsert: {
							on: {
								open() {
									console.log("cl-upsert 打开");
								},

								close(action) {
									console.log("cl-upsert 关闭", action);
								}
							},
							props: {
								onOpen: (isEdit, data, { done, submit, close }) => {
									console.log("cl-upsert 打开钩子", isEdit, data);
								},

								onClose(action, done) {
									console.log("cl-upsert 关闭钩子", action);
									done();
								},

								onInfo(data, { next, done, close }) {
									console.log("cl-upsert 详情钩子", data);
									next(data);
								},

								onSubmit(isEdit, data, { next, close, done }) {
									console.log("cl-upsert 提交钩子", `是否编辑 ${isEdit}`, data);
									next(data);
								},

								items: [
									{
										label: "姓名",
										prop: "name",
										component: {
											name: "el-input"
										},
										rules: {
											required: true,
											message: "姓名不能为空"
										}
									},
									{
										label: "是否显示存款",
										prop: "isPrice",
										value: false,
										component: {
											name: "el-switch"
										}
									},
									{
										label: "存款",
										prop: "price",
										hidden: "@isPrice",
										component: {
											name: "el-input-number"
										},
										rules: {
											required: true,
											message: "存款不能为空"
										}
									}
								],

								op: {
									layout: [
										"close",
										"save",
										({ h }) => {
											return h(
												"el-button",
												{
													props: {
														size: "small"
													},
													on: {
														click: () => {
															this.$refs["upsert"].setForm(
																"name",
																"神仙都没用"
															);
														}
													}
												},
												"设置名称"
											);
										}
									]
								},

								hdr: {
									opList: ["fullscreen", "close"]
								}
							}
						},
						advSearch: {
							on: {
								open(data) {
									console.log("adv-search 打开", data);
								},
								close() {
									console.log("adv-search 关闭");
								},
								reset() {
									console.log("adv-search 重置");
								},
								clear() {
									console.log("adv-search 清空");
								}
							},
							props: {
								onOpen(data, { next }) {
									console.log("adv-search 打开钩子", data);
									next();
								},
								onClose(done) {
									console.log("adv-search 关闭钩子");
									done();
								},
								onSearch(data, { next, close }) {
									console.log("adv-search 搜索钩子", data);
									next(data);
								},
								opList: ["search", "reset", "clear", "close"],
								items: [
									{
										label: "金额",
										prop: "price",
										value: 100,
										component: {
											name: "el-input-number",
											props: {
												min: 1,
												max: 1000000
											}
										}
									},
									{
										label: "销售率",
										prop: "salesRate",
										component: {
											name: "el-input-number",
											props: {
												precision: 2,
												min: 0,
												max: 100
											}
										}
									}
								]
							}
						},
						dialog: {
							visible: false,
							props: {
								title: "自定义对话框"
							}
						}
					};
				},

				methods: {
					openForm() {
						this.$refs["form"].open({
							props: {
								title: "自定义表单",
								"label-width": "150px",
								width: "1000px"
							},
							form: {
								qs: [1]
							},
							items: [
								{
									props: {
										"label-width": "0px"
									},
									component: ({ h }) => {
										return h(
											"el-divider",
											{
												props: {
													"content-position": "left"
												}
											},
											"测试内嵌CRUD"
										);
									}
								},
								{
									props: {
										"label-width": "0px"
									},
									component: {
										name: "slot-crud"
									}
								},
								{
									props: {
										"label-width": "0px"
									},
									component: ({ h }) => {
										return h(
											"el-divider",
											{
												props: {
													"content-position": "left"
												}
											},
											"测试验证规则"
										);
									}
								},
								{
									prop: "vads",
									value: [],
									label: "动态增减表单验证",
									component: {
										name: "slot-validate"
									}
								},
								{
									props: {
										"label-width": "0px"
									},
									component: ({ h }) => {
										return h(
											"el-divider",
											{
												props: {
													"content-position": "left"
												}
											},
											"测试显隐"
										);
									}
								},
								{
									label: "奇术",
									prop: "qs",
									value: [],
									component: {
										name: "el-select",
										attrs: {
											placeholder: "请选择奇术"
										},
										props: {
											multiple: true
										},
										options: [
											{
												label: "烟水还魂",
												value: 1
											},
											{
												label: "雨恨云愁",
												value: 2
											}
										]
									}
								},
								{
									label: "技能",
									prop: "jn",
									value: 1,
									component: {
										name: "el-select",
										attrs: {
											placeholder: "请选择技能"
										},
										options: [
											{
												label: "飞羽箭",
												value: 1
											},
											{
												label: "落星式",
												value: 2
											}
										]
									}
								},
								{
									label: "五行",
									prop: "wx",
									value: 0,
									hidden: ({ scope }) => {
										return scope.jn == 1;
									},
									component: {
										name: "el-radio-group",
										options: [
											{
												label: "水",
												value: 0
											},
											{
												label: "火",
												value: 1
											},
											{
												label: "雷",
												value: 2
											},
											{
												label: "风",
												value: 3
											},
											{
												label: "土",
												value: 4
											}
										]
									}
								},
								{
									label: "雨润",
									prop: "s1",
									hidden: ({ scope }) => {
										return scope.wx != 0;
									},
									component: ({ h }) => {
										return h("p", "以甘甜雨露的滋润使人精力充沛");
									}
								},
								{
									label: "风雪冰天",
									prop: "s2",
									hidden: ({ scope }) => {
										return scope.wx != 0;
									},
									component: ({ h }) => {
										return h("p", "召唤漫天风雪，对敌方造成巨大的杀伤力");
									}
								},
								{
									label: "三昧真火",
									prop: "h",
									hidden: ({ scope }) => {
										return scope.wx != 1;
									},
									component: ({ h }) => {
										return h("p", "召唤三昧真火焚烧敌方的仙术");
									}
								},
								{
									label: "惊雷闪",
									prop: "l",
									hidden: ({ scope }) => {
										return scope.wx != 2;
									},
									component: ({ h }) => {
										return h(
											"p",
											"召唤惊雷无数，对敌方全体进行攻击，是十分强力的仙术"
										);
									}
								},
								{
									label: "如沐春风",
									prop: "f",
									hidden: ({ scope }) => {
										return scope.wx != 3;
									},
									component: ({ h }) => {
										return h("p", "温暖柔和的复苏春风，使人回复活力");
									}
								},
								{
									label: "艮山壁障",
									prop: "t",
									hidden: ({ scope }) => {
										return scope.wx != 4;
									},
									component: ({ h }) => {
										return h(
											"p",
											"以艮山之灵形成一道壁障，受此壁障守护者刀枪不入"
										);
									}
								}
							],
							on: {
								open(data, { close, submit, done }) {
									console.log("cl-form 打开钩子", data);
								},

								close(action, done) {
									console.log("cl-form 关闭钩子", action);
									done();
								},

								submit: (data, { close, done, next }) => {
									console.log("cl-form 提交钩子", data);

									setTimeout(() => {
										done();
										this.$message.success("提交成功");
									}, 1500);
								}
							}
						});
					},

					onLoad({ ctx, app }) {
						ctx.service(testService)
							.permission(() => {
								return {
									add: true,
									update: true,
									delete: true
								};
							})
							.done();

						app.refresh();
					},
					refresh(params) {
						this.$refs["crud"].refresh(params);
					},
					onUpsertCrudLoad({ ctx, app }) {
						ctx.service(testService).done();
						app.refresh();
					},
					addVad(list) {
						list.push({
							val: ""
						});
					}
				}
			});
		</script>
	</body>
</html>
